
<template>
<div>
    <Card ref="cardbox" style="position: relative;">
        <Row :gutter="8" type="flex">
            <template v-for="item in tags">
                <Col :key="item.id" class="ivu-mb-8">
                    <Button :type="params.tag_id == item.id?'primary':'default'"  @click="changeTag(item)">{{item.name}}</Button>
                </Col>
            </template>
        </Row>
        <!-- <div class="flexsxcenter"><Button @click="changeMore" v-if="tagsList.length>20" v-show="tagsShow">加载更多</Button></div>
        <div class="flexsxcenter"><Button v-if="!tagsShow" @click="changecontract">收缩</Button></div> -->
        <div class="arrow" v-if="tagsList.length>20" v-show="tagsShow" @click="changeMore" ><Icon  type="ios-arrow-dropdown" size="30"/></div>
        <div class="arrow" @click="changecontract"  v-if="!tagsShow"><Icon   type="ios-arrow-dropup" size="30" /></div>
    </Card>
    <Scroll v-if="data.length" :on-reach-bottom="handleReachBottom" :height="height" :distance-to-edge="[1,1]">
        <Row :gutter="8" type="flex">
            <template v-for="(item,index) in data">
                <Col :key="item.id">
                    <cardImage @imgdel="imgdel" :data="item" :typeList="typeList" :index="index"/>
                </Col>
            </template>
        </Row>
        <div v-if="Message " style="display: flex;align-items: center;justify-content: center;color: #aaa;">被你看完了</div>
    </Scroll>
    <div v-else style="height:300px;display: flex;align-items: center;justify-content: center;color: #aaa;">暂无数据</div>
</div>
</template>
<script>
    import {
        materialtags,
        materialimgimglist
    } from '@/api/sourcematerial.js'
    import cardImage from './cardImage.vue'
    import { rbacmenumenuclick  } from '@api/menuclick';
    export default {
        name: 'app',
        props: {
            remark: String
        },
        components: { cardImage },
        data () {
            return {
                Message: false,
                tags: [],
                tagsList: [],
                typeList: [],
                tagsShow: true,
                height: null,
                data: [],
                params: { remark: '', tag_id: 0, page: 1, pageSize: 24 }
            }
        },
        mounted () {
            this.gettagtype()
            this.requestAction = this.baseUrl + `/v1/material/upload/imgs-upload`;
        },
        methods: {
            imgdel (index) {
                this.data.splice(index, 1)
            },
            initial () {
                this.params.page = 1
                this.askData()
                this.rbacmenumenuclick()
            },
            rbacmenumenuclick(){
                let params={
                    menu_name:'素材库',
                    module_name:'图片'
                }
                rbacmenumenuclick(params).then(() => {}).catch(() => {})
            },
            askData () {
                this.params.remark = this.remark
                this.show = true
                this.Message = false
                materialimgimglist(this.params).then(res => {
                    this.data = res.list
                    this.total = res.total
                    this.$nextTick(() => {
                        setTimeout(() => {
                            this.height = document.documentElement.clientHeight - 230 - this.$refs.cardbox.$el.offsetHeight
                        }, 100)
                    });
                })
            },
            askDatas () {
                this.params.remark = this.remark
                this.show = true
                materialimgimglist(this.params).then(res => {
                    this.data.push(...res.list)
                })
            },
            // 获取类别
            gettagtype () {
                materialtags({}).then(res => {
                    this.typeList = res;
                    this.tagsList = res.map(item => ({ ...item }));
                    this.tagsList.unshift({ id: '', name: '所有' })
                    this.tags = this.tagsList.slice(0, 20);
                })
            },
            // tabs切换
            changeTag (item) {
                this.params.tag_id = item.id
                this.initial()
            },
            changeMore () {
                this.tags = this.tagsList
                this.tagsShow = false
                this.$nextTick(() => {
                    setTimeout(() => {
                        this.height = document.documentElement.clientHeight - 230 - this.$refs.cardbox.$el.offsetHeight
                    }, 100)
                });
            },
            changecontract(){
                this.tags = this.tagsList.slice(0, 20);
                this.tagsShow = true
                this.$nextTick(() => {
                    setTimeout(() => {
                        this.height = document.documentElement.clientHeight - 230 - this.$refs.cardbox.$el.offsetHeight
                    }, 100)
                })
            },
            handleReachBottom () {
                if (this.total > this.params.pageSize * this.params.page) {
                    this.params.page++
                    this.askDatas()
                } else {
                    this.Message = true
                }
            },
            clicknow(){

            }
        }
    }
</script>
<style scoped>
.arrow{
    position: absolute;
    left: 50%;
    bottom: -9px;
    cursor: pointer;
    z-index: 999;
}
</style>
